import React from 'react';
import { Chart, Geom, Axis, Tooltip } from 'bizcharts';

// eslint-disable-next-line react/prefer-stateless-function
class MyAchievement extends React.Component {
  render() {
    const data = [
      {
        year: '周一',
        value: 300,
      },
      {
        year: '周二',
        value: 113,
      },
      {
        year: '周三',
        value: 1123,
      },
      {
        year: '周四',
        value: 1123,
      },
      {
        year: '周五',
        value: 1123,
      },
      {
        year: '周六',
        value: 130,
      },
      {
        year: '周日',
        value: 133,
      },
    ];
    const cols = {
      value: {
        min: 0,
      },
      year: {
        range: [0, 1],
      },
    };
    return (
      <div>
        <Chart height={250} data={data} scale={cols} forceFit padding={[30, 40, 40, 50]}>
          <Axis name="year" />
          <Axis name="value" />
          <Tooltip
            crosshairs={{
              type: 'y',
            }}
          />
          <Geom type="line" position="year*value" shape="smooth" size={2} />
        </Chart>
      </div>
    );
  }
}

export default MyAchievement;
